//  获取数据并渲染
function renderCategory () {
    axios.get('/my/category/list').then( res => {
        // console.log(res);
        let { status,data} = res.data;
        if( status === 0) {
            let str = '';
            data.forEach( item => {
                str += `
                <tr>
                    <td>${item.name}</td>
                    <td>${item.alias}</td>
                    <td>
                    <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class=" btn dal layui-btn layui-btn-xs">编辑</button>
                    <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr> 
                `;
            });
            $('tbody').html(str);
        }
    })
};
renderCategory();


// 删除功能
$('tbody').on('click','.del',function(){
    // this,表示删除按钮
    let id = $(this).data('id');
    // 询问是否删除
    layer.confirm('是否移除',function(index){
        // 确定，接口。发送请求
        axios.get(`/my/category/delete?id=${id}`). then( res => {
            let { status, message} = res.data;
            if( status === 0){
                layer.msg(message);
                // 删除页面之后在 渲染 更新页面
                renderCategory();
            }
        })
        // 关闭弹层
        layer.close(index);
    })

});

// 点击编辑按钮出现弹层;
let addIndex;
$('tbody').on('.dal','click',function(){
    // console.log(测试);
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(),
        area: ['500px','250px']
    });
})

// 表单提交，发送ajax请求，完成添加
$('body').on('submit','#add-form',function(e){
    e.preventDefault();
    let data = $(this).serialize();
    axios.post('/my/category/add',data).then( res => {
        let { status,message} = res.data;
        if( status === 0){
            layer.msg(message);
            // 渲染页面
            renderCategory();
            // 关闭弹层
            layer.close(addIndex);
        }
    })
});

// 修改功能
let ediItndex;
$('tbody').on('click','.btn',function(){
    let shuju = $(this).data();
    console.log(shuju);
    ediItndex = layer.open({
        type: 1,
        title: '编辑类别',
        content: $('#tpl-edit').html(),
        area: ['500px','250px'],
        success: function (){
            let form = layui.form;
            form.val('edit',shuju);
        }
    });
});

// 4.表单提交，完成修改
$('body').on('submit','#edit-form',function(e){
    e.preventDefault();
    let data = $(this).serialize();
    axios.post('/my/category/update',data).then( res => {
        let { status,message} = res.data;
        if( status === 0){
            layer.msg(message);
            // 渲染页面
            renderCategory();
            // 关闭弹窗
            layer.close(ediItndex);
        }
    })
})

